<template>
	<view class="content">
		<!-- <view class="search-container">
		  <view class="search-input-container">
			<input class="search-input" type="text" v-model="searchQuery"  placeholder="请输入搜索关键字" />
		  </view>
		  <button class="search-button" @click="ArticleLater">
			搜索
		  </button>
		</view> -->
		<uni-row>
			<uni-col :span="24" >
				<uni-swiper-dot :info="list" :current="current" field="content" mode="round">
					<swiper class="swiper-box" @change="change" :interval="3000" :autoplay="true" :circular="true">
						<swiper-item v-for="(item ,index) in list" :key="index" >
							<view class="colcenter">
								<img class="tu" :src="baseUrl+item.imgPath" alt="image" />				   								
							</view>
							<view class="text-overlay" v-if="item.title">
								{{ item.title }}
							</view>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</uni-col >
		</uni-row>
 	<!-- 活动列表 -->
 		<view class="activity-section">
 			<view class="section-title" v-if="hostList.length > 0">
 				<view class="title-wrapper">
 					<view class="title-left">
 						<text class="main-title">精彩活动</text>
 					</view>
 				</view>
 			</view>
			</view>
		<view>
			<view v-if="hostList.length > 0" class="host">
				<view class="host_body" v-for="(item, index) in hostList" :key="index">
					<view class="imageing" v-if="item.imgPath.split(',')[0]" @click="previewImage(index)">
						<img style="width: 345rpx; height: 200rpx;" mode="widthFix" :src="baseUrl + item.imgPath.split(',')[0]">
					</view>
					<view class="host_darkness" @click="toParticulars(item)">
						<u-row class="ty" justify="space-between">
							<u-col span="6" class="yui">
								<p class="yui" v-if="item.name">{{item.name}}</p>
							</u-col>
						</u-row>
					</view>
				</view>
			</view>
			<view v-else  class="centered-content">暂无活动</view>
		</view>
	
	  </view>
</template>

<script>
	import request from '@/util/request'
    export default {
        data() {
            return {
				searchQuery: '',// 用于双向绑定的搜索关键词
				hostList: [], //数据
				baseUrl: this.$baseUrl,
				current: 0,
                list: [] , //数据集合
				};
		},
		onShow() {
			this.getImgList();
			this.ArticleLater();
		},
		methods: {
			/* 查询数据 */
			getImgList(){
			    request({
					url: '/imgsorting/imgsorting/lists',
				 }).then((res) => {
					this.list = res.data;
			    })
			},
			
			change(e) {
						this.current = e.detail.current;
					}, 
					
			/* 查询图片 */ 
			ArticleLater() {
				request({
					url: '/activity/activity/ArticleLater',
					method: 'get',
					data: {  
						searchQuery: this.searchQuery 
					}
				}).then(res => {
					this.hostList = res.data; // 确保取到正确的属性
				}).catch(err => {
		
				});
			},
			
			/* 图片预览 */
			previewImage(index) {
				const imgUrls = this.hostList[index].imgPath.split(",");
				if (imgUrls.length > 0) {
					const newurls = imgUrls.map(item => {
						return item = this.$baseUrl + item;
					});
					// 调用预览图片API
					uni.previewImage({
						current: 0, // 当前显示图片索引
						urls: newurls, // 需要预览的图片URL列表
					});
				}
			},
			/* 跳转详情 */
			toParticulars(itme) {
				uni.navigateTo({
					 url: `/pages/activity/particulars/particulars?itme=${JSON.stringify(itme)}`,
				});
			}
		},
					
		}
			
</script>
<style >
.search-container {
  display: flex;
  align-items: center;
  background-color: #ffffff; /* 白色背景 */
  border-radius: 20px; /* 圆角 */
  padding: 5px; /* 内边距 */
  margin: 10px; /* 外边距 */
  height: 30px; /* 减少高度 */
}
.activity-section {
	padding: 20rpx;
}
.section-title {
		margin: 30rpx 20rpx;
	
	}
	.main-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		display: block;
	}
	.sub-title {
		font-size: 24rpx;
		color: #999;
		margin-top: 6rpx;
	}
.search-input-container {
  flex: 1; /* 占据剩余空间 */
  position: relative; /* 相对定位 */
}

.search-input {
  width: 100%;
  padding: 5px 10px; /* 内边距 */
  border: none; /* 无边框 */
  outline: none; /* 无轮廓 */
  background-color: transparent; /* 背景透明 */
  font-size: 14px; /* 字体大小 */
}

.search-button { /* 搜索按钮*/
  background-color: #FDB73D; /* 白色背景 */
  border: none; /* 无边框 */
  outline: none; /* 无轮廓 */
  cursor: pointer; /* 鼠标指针 */
  border-radius: 20px; /* 圆角 */
  color: #000000; /* 黑色文字 */
  font-size: 14px; /* 字体大小 */
}
	.text-overlay {  /* 轮播图上显示的标题 */
	    position: absolute;
	     bottom: 10px; /* 根据图片中的文本位置调整 */
	     left: 40px; /* 根据图片中的文本位置调整 */
	     color: white; /* 图片中的文本颜色为白色 */
	     font-size: 14px; /* 根据图片中的文本大小调整 */ 
	     font-family: 'Arial', sans-serif; /* 使用更现代的字体，或者与图片中的字体相似的字体 */
	     text-align: left; /* 根据图片中的文本对齐方式调整 */
	    /* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); */ /* 阴影效果 */
		/* background-color: rgba(0, 0, 0, 0.5); */ /* 背景颜色，半透明黑色 */
		padding: 5px; /* 内边距 */
		/* width: 200rpx; */
	}
	.tu { /* 轮播图 */
	  width: 98%;
	  height: 150px;
	  border: 1px solid #ccc;
	   border-radius: 5px;
	  /* position: relative; */
	/*  top: 10px; */
	 
	}
	
	.uni-swiper__warp {  /* 轮播图边距 */
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
	.colcenter { /* 轮播图居中 */
		display: flex;
		justify-content: center;
		/* 列内水平居中 */
		align-items: center;
		/* 列内垂直居中 */
		height: 100%;
		/* 确保列高度100% */
	}
	
	
	.host {
		margin-top: 40rpx;
		margin: 0 auto;
		padding: 0 20rpx;
		column-count: 2;
		column-gap: 20rpx;
	}
	
	.host_body {
		width: 345rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
		overflow: hidden;
		background-color: #fff;
		break-inside: avoid;
		/*避免在元素内部插入分页符*/
		box-sizing: border-box;
		/* 	margin-top: rpx; */
		margin-bottom: 20rpx;
		box-shadow: 0px 0px 28rpx 1rpx rgba(78, 101, 153, 0.14);
	}
	.host_darkness {
		padding-left: 16rpx;
		font-size: 25rpx;
		margin-top: 15rpx;
		padding-bottom: 22rpx;
	}
	
	.yui {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-top: 5px;
	}
	.imageing_img {
		width: 345rpx;
		height: auto;
	}
	.centered-content {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 30vh;
	}
</style> 